<template>
  <div class="charts-container">
    <!-- <div id="patientAndDiseaseChart" class="chart"></div>
    <div id="userAndRoleChart" class="chart"></div>
    <div id="diagnosisRecordChart" class="chart"></div>
    <div id="operateLogChart" class="chart"></div> -->
    <BarChart
      id="patientAndDiseaseChart"
      :chart-data="patientAndDiseaseData"
      :formatter="lineBreakFormatter"
      class="chart"
    ></BarChart>
    <BarChart
      id="userAndRoleChart"
      :chart-data="userAndRoleData"
      class="chart"
    ></BarChart>
    <BarChart
      id="diagnosisRecordChart"
      :chart-data="diagnosisRecordData"
      class="chart"
    ></BarChart>
    <BarChart
      id="operateLogChart"
      :chart-data="operateLogData"
      class="chart"
    ></BarChart>
  </div>
</template>

<script setup lang="ts">
import BarChart from "@/components/BarChart.vue";
import { ref, onMounted, getCurrentInstance } from "vue";
const instance = getCurrentInstance();
const proxy = instance?.proxy as any;
import { useRouter, Router } from "vue-router";
const router: Router = useRouter();
import { UserInfo } from "@/types/user";
import { BarChartData, Formatter } from "@/types/charts";
import { RequestParams } from "@/types/request";

const token = ref<string>("");
//data
const patientAndDiseaseData = ref<BarChartData>({
  title: "患者与疾病统计",
  xAxisData: [],
  seriesData: [],
});
const userAndRoleData = ref<BarChartData>({
  title: "用户与角色统计",
  xAxisData: [],
  seriesData: [],
});
const diagnosisRecordData = ref<BarChartData>({
  title: "诊断记录统计",
  xAxisData: [],
  seriesData: [],
});
const operateLogData = ref<BarChartData>({
  title: "操作日志统计",
  xAxisData: [],
  seriesData: [],
});

//格式化函数
const lineBreakFormatter: Formatter = (value: string) => {
  const maxLength = 5;
  const lines = [];
  for (let i = 0; i < value.length; i += maxLength) {
    lines.push(value.slice(i, i + maxLength));
  }
  return lines.join("\n");
};

const fetchStatistics = async () => {
  try {
    const sessionUserData = sessionStorage.getItem("userData");
    const userData: UserInfo = sessionUserData
      ? JSON.parse(sessionUserData)
      : ({} as UserInfo);
    if (!userData.token) throw new Error("未获取登录状态");
    token.value = userData.token;
    //请求数据
    let patientRes: any = await proxy.request({
      method: "get",
      url: proxy.api.statisticsPatientAndDisease,
      params: {} as RequestParams,
      headers: {
        authentication: token.value,
      },
      showLoading:false
    });
    if (!patientRes) {
      return;
    }
    let userRes: any = await proxy.request({
      method: "get",
      url: proxy.api.statisticsUserAndRole,
      params: {} as RequestParams,
      headers: {
        authentication: token.value,
      },
      showLoading:false
    });
    if (!userRes) {
      return;
    }
    let diagnosisRes: any = await proxy.request({
      method: "get",
      url: proxy.api.statisticsDiagnosisRecord,
      params: {} as RequestParams,
      headers: {
        authentication: token.value,
      },
      showLoading:false
    });
    if (!diagnosisRes) {
      return;
    }
    let operateRes: any = await proxy.request({
      method: "get",
      url: proxy.api.statisticsOperateLog,
      params: {} as RequestParams,
      headers: {
        authentication: token.value,
      },
      showLoading:false
    });
    if (!operateRes) {
      return;
    }
    if (patientRes.code === 1) {
      patientAndDiseaseData.value = {
        title: "患者与疾病统计",
        xAxisData: patientRes.data.diseaseTypes,
        seriesData: patientRes.data.patientCounts,
      };
    }
    if (userRes.code === 1) {
      userAndRoleData.value = {
        title: "用户与角色统计",
        xAxisData: userRes.data.roles,
        seriesData: userRes.data.userCounts,
      };
    }
    if (diagnosisRes.code === 1) {
      diagnosisRecordData.value = {
        title: "诊断记录统计",
        xAxisData: diagnosisRes.data.dates,
        seriesData: diagnosisRes.data.recordCounts,
      };
    }
    if (operateRes.code === 1) {
      operateLogData.value = {
        title: "操作日志统计",
        xAxisData: operateRes.data.dates,
        seriesData: operateRes.data.logCounts,
      };
    }
  } catch (error) {
    proxy.message.error("未获取到数据");
  }
};

onMounted(() => {
  const sessionUserData = sessionStorage.getItem("userData");
  const userData: UserInfo = sessionUserData
    ? JSON.parse(sessionUserData)
    : ({} as UserInfo);
  if (userData) {
    token.value = userData.token;
    fetchStatistics();
  } else {
    proxy.message.error("未找到信息，请重新登录");
    router.push("/login");
  }
});
</script>

<style scoped>
.charts-container {
  display: grid;
  background-color: white;
  padding: 20px;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: calc(100vh - 120px);
}
.chart {
  width: 100%;
  height: 100%;
}
</style>
